<template>
  <div id="register">
    <el-dialog title="注册" :visible.sync="dialogFormVisible" style="width:1000px;margin: 0 auto">
      <el-form :model="form" status-icon :rules="registerRules" ref="form" class="demo-ruleForm">
        <el-form-item label="用户名" :label-width="formLabelWidth" prop="username">
          <el-input v-model="form.username" autocomplete="off" :style="width" placeholder="登录用户名"></el-input>
        </el-form-item>
        <el-form-item label="昵称" :label-width="formLabelWidth" prop="nickName">
          <el-input v-model="form.nickName" autocomplete="off" :style="width" placeholder="昵称"></el-input>
        </el-form-item>
        <el-form-item label="性别" :label-width="formLabelWidth" prop="sex">
          <el-radio-group v-model="form.sex">
            <el-radio label="男"></el-radio>
            <el-radio label="女"></el-radio>
          </el-radio-group>
          <span style="margin-left: 20px;font-size: 3px">(不可修改哦!)</span>
        </el-form-item>
       <el-form-item label="个人简介" :label-width="formLabelWidth">
          <el-input v-model="form.introduction" autocomplete="off" :style="width" placeholder="选填"></el-input>
        </el-form-item>
        <el-form-item label="email" :label-width="formLabelWidth" prop="email">
          <el-input v-model="form.email" autocomplete="off" :style="width"></el-input>
        </el-form-item>
         <el-form-item label="年龄" :label-width="formLabelWidth" prop="age">
          <el-input v-model="form.age" autocomplete="off" :style="width" placeholder="选填"></el-input>
        </el-form-item>
        <el-form-item label="密码" :label-width="formLabelWidth" prop="password">
          <el-input type="password" v-model="form.password" autocomplete="off" :style="width"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="rePassword">
          <el-input type="password" v-model="form.rePassword" autocomplete="off" :style="width"></el-input>
        </el-form-item>
      </el-form>
      <div style="margin-left: 150px">
        <el-button type="primary" @click="registerOk('form')" style="width: 100px;">注 册</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "Register.vue",
  data() {
    //用户名验证
    const validUsername = (rule, value, callback) => {
      const reg = /^[a-zA-z]\w{3,9}$/
      if (value === '') {
        callback(new Error('请输入用户名'))
        return
      }
      else if (!reg.test(value)) {
        callback(new Error('用户名必须字母、数字、下划线组成，字母开头，4-10位'))
        return
      }
      //检测当前用户名是否已被注册
      this.checkUsernameAndNickName(1)
      if (this.usernmameResult) {
        callback()
        return
      } else {
        callback(new Error('该用户名已被注册'))
      }

      /*else {
        callback()
      }*/
    };
    //昵称验证
    const validNickName = (rule, value, callback) => {
      const reg = /^[\d\w\u4e00-\u9fa5,\.;\:"'?!\-]{2,9}$/
      if (value === '') {
        callback(new Error('请输入昵称'))
        return
      }
      else if (!reg.test(value)) {
        callback(new Error('昵称是由2-9位的中文,英文,数字,下划线以及一些常用的标点符号'))
        return
      }
      //检测当前用户名是否已被注册
      this.checkUsernameAndNickName(2)
      if (this.nickNameResult) {
        callback()
      } else {
        callback(new Error('该昵称已被使用'))
      }
      /*else {
        callback()
      }*/
    };
    //年龄验证
    const validAge = (rule, value, callback) => {
      const reg = /^(?:[1-9][0-9]?|1[01][0-9]|120)$/
      if(value === '') {
        callback()
        return
      }
      if (!reg.test(value)) {
        callback(new Error('输入正确的年龄'))
      }
      else {
        callback()
      }
    };
    //密码
    var validatePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请输入密码'));
        return
      } else {
        if (this.form.rePassword !== '') {
          this.$refs.form.validateField('rePassword');
        }
        callback();
      }
    };
    //确认密码
    var validateRePassword = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'));
      } else if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'));
      } else {
        callback();
      }
    };
    return {
      dialogFormVisible: false, //注册对话框是否打开
      formLabelWidth: '80px', //写入的宽度
      width: 'width:300px',
      usernmameResult: false,
      nickNameResult: false,
      form: {
        username: '', nickName: '', sex: '', introduction: '',
        email: '', age: '', password: '', rePassword: ''
      },
      registerRules: {
        username: [
          {required: true, validator: validUsername, trigger: 'blur'}
        ],
        nickName: [
          {required: true, validator: validNickName, trigger: 'blur'}
        ],
        sex: [
          {required: true, message: '请选择性别', trigger: 'change'}
        ],
        email: [
          { required: true, message: '请输入邮箱地址', trigger: 'blur' },
          { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
        ],
        age: [
          { required: true, validator: validAge, trigger: 'blur' }
        ],
        password: [
          { validator: validatePassword, trigger: 'blur' }
        ],
        rePassword: [
          { validator: validateRePassword, trigger: 'blur' }
        ],
      }
    }
  },
  methods: {
    open() {
      this.dialogFormVisible = true
    },
    close() {
      this.dialogFormVisible = false
    },
    //检测用户输入的用户名和昵称是否已被注册
    checkUsernameAndNickName(value) {
      if (value == 1) { //检测用户名是否重复
        this.$myAxios('/register/checkUsername', 'get', {username: this.form.username}, resp => {
          console.log(resp)
          this.usernmameResult=resp.data.data
        })
      }
      else {
        this.$myAxios('/register/checkNickName','get',{nickName: this.form.nickName}, resp=> {
          console.log(resp)
          this.nickNameResult=resp.data.data
        })
      }
    },
    //注册按钮
    registerOk(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) { //表单验证通过情况
          this.$myAxios('/register/goRegisterJ','post',this.form,resp=>{
            console.log(resp)
            this.$message({
              message: '注册成功!',
              type: 'success'
            });
          })
          this.$parent.close()
        } else { //表单验证没通过情况
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>

</style>